<%-- 
    Document   : map_page
    Created on : Apr 1, 2013, 1:31:45 PM
    Author     : quantumDrop
--%>

<%@page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
    <head>
        <title>Adventure - NCT Software - Map Page</title>
        <script src="http://code.jquery.com/jquery-latest.js"></script>
        <!--script src="https://maps.googleapis.com/maps/api/js?sensor=false&libraries=places"></script-->
        <script type="text/javascript"
                src="https://maps.googleapis.com/maps/api/js?AIzaSyASxtqXuj-Yf-yOR4sD-uQcROa87fDefCc&sensor=true&libraries=places">
        </script>

        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <link rel="stylesheet" type="text/css" href="css/mappageCSS.css">
        <link rel="stylesheet" type="text/css" href="css/subCSS/friendsBarCSS.css"/>
        <link rel="stylesheet" type="text/css" href="css/subCSS/statsDropUpCSS.css"/>
        <link rel="stylesheet" type="text/css" href="css/subCSS/locationsNearMeCSS.css"/>
        <link rel="stylesheet" type="text/css" href="css/subCSS/addAWaypointCSS.css"/>
        <link rel="stylesheet" type="text/css" href="css/subCSS/DayPlannerCSS.css"/>

        <!-- JQUERY CALENDAR CODE src = http://jqueryui.com/datepicker/-->
        <script src="jqueryCalendar/jquery-1.6.2.min.js"></script>
        <script src="jqueryCalendar/jquery-ui-1.8.15.custom.min.js"></script>
        <link rel="stylesheet" href="jqueryCalendar/jqueryCalendar.css">
        <!-- END JQUERY CALENDAR src = http://jqueryui.com/datepicker/  -->
    </head> 
    <body>

        <input type="hidden" value ="${locationList}" id ="locationList"/>
        <input type ="hidden" value ="${dateList}" id="dateList"/>
        <input type ="hidden" value ="${tripId}" id="tripId"/>



        <div id="topBar">
            <div id="leftDiv"><img src="images/adventure_text.png"/></div>
            <form action="./CreateaTripServlet" method="POST" id="loginForm">
                <div id="farRightButton"><img id='TripCreationButton' src='images/createTripButton.png'/></div>
                <div id="rightDivTop"><img id='AccountButton' src='images/AccountButton.png'/></div>
                <div id="rightDivBtm"><img id='SignOutButton' src='images/SignOutButton.png'/></div>   
            </form>
        </div>

        <div id="map"></div>
        <div id="greyout" class="borderSolid"></div>
        <div id="friendsDropUp" class="borderSolid"></div>
        
        <div id="statsDropUp" class="borderSolid">
            <div id="mainDiv">
            </div>
            <div id="bottomDiv">
            </div>
        </div>

        <div  id="dayPlannerDropUp" id="leftDayPlanner" class="borderSolid">
            <label for="searchBox">Search For Date: </label><input id="searchBox" type="text" onkeyup="search()"/><br/>
            <div id="schedule"></div>
            <div id="rightDayPlanner"></div>
        </div>
        <div id="addWaypointDropUp" class="borderSolid">
            <div id="upperDiv">

                <div id ="startDiv"> Start: <input id="tripStart" class="startInput"/>  Date: <input id="tripStartDate" class="startInputDate"/> &nbsp; <input id="updateStart" type="button" value="Update" onclick="addStart()"/></div> 
                <div id="waypointDiv"></div>
                <label for="addWaypoints" class="createTripLabel">Waypoints: </label>
                <input id="tripWaypoint" type="text" name="tripWaypoint" class="createTripInput"/>
                 <label for="waypointDate" class="createTripLabel">Date: </label>
                <input id="tripWaypointDate" type="text" name="tripWaypointDate" class="createTripInput" class="dateClass"/>
                <input id="addWayPtBtn" type="button" value="Add New Waypoint" onclick="addWayPt()"/>
                <div id ="endDiv">End: <input id='tripEnd' class='endInput'/> Date: <input id='tripEndDate' class='endInputDate'/> &nbsp; <input type='button' value='Update' onclick='addEnd()'/></div>
                <br/><br/>
                <input type="submit" value="Submit Updates" onclick="addToServlet()"/>
            </div>

            <div id="wayPointMap"></div>

        </div>

        <div id="locationsNearMeDropUp" class="borderSolid">
            <input type="text" id="locationFindBar" name="locationsNearMeSearchBar" value="Search for a location">          
            <input type="button" id="locationFindButton" onclick="performClick()" value="Go">
            <select id="locationTypeSelectBox" class="selectBox">
                    <option value="0">Airport</option>
                    <option value="1">Amusement Park</option>
                    <option value="2">Aquarium</option>
                    <option value="3">Art Gallery</option>
                    <option value="4">ATM</option>
                    <option value="5">Bank</option>
                    <option value="6">Bar</option>
                    <option value="7">Campground</option>
                    <option value="8">Car Rental</option>
                    <option value="9">Car Repair</option>
                    <option value="10">Casino</option>
                    <option value="11">Church</option>
                    <option value="12">Clothing Store</option>
                    <option value="13">Food</option>
                    <option value="14">Gas Station</option>
                    <option value="15">Grocery Store</option>
                    <option value="16">Hospital</option>
                    <option value="17">Laundry</option>
                    <option value="18">Lawyer</option>
                    <option value="19">Lodging</option>
                    <option value="20">Take out</option>
                    <option value="21">Movie Theater</option>
                    <option value="22">Moving Company</option>
                    <option value="23">Museum</option>
                    <option value="24">Parking</option>
                    <option value="25">Pharmacy</option>
                    <option value="26">Zoo</option>
                </select>
                
                <select id="radiusSelectBox" class="selectBox">
                    <option value="0">1 Mile</option>
                    <option value="1">5 Miles</option>
                    <option value="2">10 Miles</option>
                    <option value="3">20 Miles</option>
                    <option value="4">50 Miles</option>
                    <option value="5">100 Miles</option>
                </select>
        </div>
        <div id="btmBar">
            <!--Buttons/Drop up Menus
                    NOTE: Each Button has its own css div just in case we need to make a change specific to a button-->

            <!--Add Friends To Trip-->
            <div id="btmButtonOneDiv"><img id='AddFriendToTripButton' src='images/AddFriendsToTripButton.png'/></div>
            <!--Stats-->
            <div id="btmButtonTwoDiv"><img id='StatsButton' src='images/StatsButton.png'/></div>
            <!--Day Planner-->
            <div id="btmButtonThreeDiv"><img id='DayPlannerButton' src='images/DayPlannerButton.png'/></div>
            <!--Add A Waypoint-->
            <div id="btmButtonFourDiv"><img id='AddAWaypointButton' src='images/AddAWaypointButton.png'/></div>
            <!--Locations Near Me-->
            <div id="btmButtonFiveDiv"><img id='LocationsNearMeButton' src='images/LocationsNearMeButton.png'/></div>
        </div>
        <!--script src="javascript/GoogleMapJavascript.js"></script-->
        <script src ="javascript/MapPageJavascript.js"></script>
        <script src="javascript/ButtonHoverJavascript.js"></script>
        <!--script src="javascript/accountpage.js"></script-->
        <script src="javascript/mapPage_DropUpJavascript.js"></script>
        <script src="javascript/SubJavascript/FindFriendJavascript.js"></script>
        <script src="javascript/SubJavascript/DayPlannerJavascript.js"></script>
        <script src="javascript/SubJavascript/AddWaypointJavascript.js"></script>
        
    </body>
</html>
